<template>
  <grid>
    <el-timeline>
      <el-timeline-item v-for="(item, index) in list"
                        :key="index">
        <el-card>
          <h4 class="project-title">{{item.title}}</h4>
          <p class="project-summary">{{item.summary}}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </grid>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import itemList from "@/components/item-list";

export default {
  name: 'project',
  title: '项目列表 | 曾经做过的一些项目',
  data () {
    return {
      query: {
        page: 1,
        limit: 12
      }
    }
  },
  components: {
    itemList
  },
  computed: {
    ...mapGetters('project', ['list', 'total'])
  },
  async asyncData ({ store, route }) {
    const { query } = route;
    return store.dispatch('project/fetchList', { page: 1, limit: 12 })
  },
  methods: {
    ...mapActions('project', ['fetchList']),
  }
}
</script>

<style lang="scss" scoped>
.project-title {
  margin-top: 10px;
  text-align: left;
}
.project-summary {
  text-align: left;
}
</style>